<template>
	<view class="container">
		<cu-custom bgColor="bg-gray" :isBack="true">
			<block slot="content">预定签到</block>
		</cu-custom>
		<view class="qdBox">
			<view class="qdBackground">
				<image class="bgImage" :src="form.coverImg" mode="aspectFit"></image>
				<view class="fmUpload flex align-center justify-center" @click="choose">
					<image src="../../static/edit.png" mode=""></image>
					<text>上传封面</text>
				</view>
			</view>
			<view class="qdForm margin-top">
				<u--form :model="form" ref="uForm" labelWidth="100">
					<u-form-item label="标题" prop="meetingCode">
						<input type="number" @change="changeFormCode" v-model="form.title" name="" id="" placeholder="请输入房间号">
					</u-form-item>
					<u-form-item label="简介" prop="meetingPwd">
						<input type="number" v-model="form.description"  name="" id="" placeholder="请输入简介">
					</u-form-item>
					<u-form-item label="房间密码" prop="name">
						<view class="flex align-center justify-between">
							<view v-if="!hasPasswd"></view>
							<input v-else type="number" v-model="form.password"  name="" id="" placeholder="请输入房间密码">
							<u-switch v-model="hasPasswd"></u-switch>
						</view>
					</u-form-item>
					<u-form-item label="限定名单" prop="name">
						<view class="flex align-center justify-between">
							<view></view>
							<u-switch v-model="form.hasName"></u-switch>
						</view>
					</u-form-item>
					<u-form-item label="信息收集" prop="name">
						<view class="flex align-center justify-between">
							<view></view>
							<u-switch v-model="form.hasInfo"></u-switch>
						</view>
					</u-form-item>
					<u-form-item label="身份审核" prop="name">
						<view class="flex align-center justify-between">
							<view></view>
							<u-switch v-model="form.hasApply"></u-switch>
						</view>
					</u-form-item>
					<u-form-item label="允许评论" prop="name">
						<view class="flex align-center justify-between">
							<view></view>
							<u-switch v-model="form.hasComment"></u-switch>
						</view>
					</u-form-item>
					<u-form-item label="抽奖" prop="name">
						<view class="flex align-center justify-between">
							<view></view>
							<u-switch v-model="hasName"></u-switch>
						</view>
					</u-form-item>
				</u--form>
			</view>
			<!--  -->
			<view class="qdItem" v-for="(item,index) in formList" :key="index">
				<view class="itemTitle flex align-center justify-between">
					<view class="bq">签到{{index+1}}</view>
					<input type="text" v-model="item.title" class="titInput" placeholder="点击修改标题">
				</view>
				<view class="qdForm nopadding">
					<u--form ref="uForm" labelWidth="100">
						<u-form-item label="备注" prop="meetingCode">
							<input type="text" v-model="item.remark" name="" id="" placeholder="请输入备注">
						</u-form-item>
						<u-form-item label="开始时间" prop="meetingPwd" @click="itemClick('start',index)">
							<view>{{item.startTime}}</view>
						</u-form-item>
						<u-form-item label="结束时间" prop="meetingPwd" @click="itemClick('end',index)">
							<view>{{item.endTime}}</view>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		<view class="flexBottom flex align-center">
			<view class="leftBtn flex justify-center align-center" @click="addItemList">
				<image src="../../static/add.png" mode=""></image>
				<view class="">
					新增签到
				</view>
			</view>
			<view class="rightBtn flex align-center justify-center" @click="createHome">
				预定完成
			</view>
		</view>
		<u-datetime-picker
				:show="Dateshow"
				v-model="dateTime"
				@confirm="changeDate"
				@cancel="Dateshow = false"
				mode="datetime"
		></u-datetime-picker>
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				dateTime: Number(new Date()),
				Dateshow:false,
				hasPasswd: false,
				form:{
					title:"",
					description:"",
					password:"",
					coverImg:"",
					hasName: false,
					hasInfo: false,
					hasApply: false,
					hasComment: false,
				},
				formData:{
					type:"",
					index:0
				},
				formList:[],
				fileList:[],
				hasApply:false,
				showSelect:false,
				selectActions:[],
				formItem:{},
			};
		},
		//下拉刷新
		onPullDownRefresh(){
		},
		//加载更多
		onReachBottom(){
		},
		onShow() {
		},
		computed: {
		},			
		methods: {
			// 图片上传
			choose() {
				let _this = this;
				let chooseImg = this.$ComFunJS.ChooseImage(1);
				chooseImg.then((res) => {
					this.form.coverImg = res[0]
				})
			},
			// 新增事件
			addItemList(){
				let label = {
					title:"",
					remark:"",
					startTime:this.$ComFunJS.getNowDate('yyyy-MM-dd HH:mm:ss','','Number'),
					endTime:this.$ComFunJS.getNowDate('yyyy-MM-dd HH:mm:ss','','Number')
				}
				this.formList = [...this.formList,{...label}]
			},
			//选择框修改
			changeDate(e){
			    this.formData.type=='start'?this.formList[this.formData.index].startTime = this.$ComFunJS.getNowDate('yyyy-MM-dd HH:mm:ss',e.value,'Number'):this.formList[this.formData.index].endTime = this.$ComFunJS.getNowDate('yyyy-MM-dd HH:mm:ss',e.value,'Number')
				this.Dateshow = false
			},
			// item点击事件
			itemClick(type,index){
				this.formData.type = type;
				this.formData.index = index;
				this.Dateshow = true
			},
			createHome(){
				///rest/api/joinMeeting
				if(!this.form.meetingCode){
					this.$api.msg('房间号不能为空哦')
					return
				}
				let formData = [];
				if(this.formList.length){
					formData = Object.keys(this.formData).map((label,key)=>{
						let labelItem = {
							formId:label.split('_')[1],
							content:Array.isArray(this.formData[label])?this.formData[label].join(','):this.formData[label]
						}
						return labelItem
					})
				}
				this.$ComFunJS.ajax({
					method:"post",
					url: "/rest/api/createMeeting",
					data:{
						title: this.form.title,
						description: this.form.description,
						coverImg: this.form.coverImg,
						password: this.hasPasswd ? this.form.password : '',
						hasInfo: this.form.hasInfo ? 1 : 0,
						authentication: this.form.hasApply ? 1 : 0,
						comment: this.form.hasComment ? 1 : 0,
						meetEvents: JSON.stringify(this.formList)
					},
					success:(result)=>{
						this.$api.msg('加入成功');
						setTimeout(() => {
						    uni.navigateBack();
						}, 1000);
					}
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.qdBox{
		padding:20upx 32upx;
		padding-bottom: 120upx;
		.qdBackground{
			width: 100%;
			height: 300upx;
			border-radius: 20upx;
			background: #1A75FF;
			position: relative;
			.bgImage{
				width: 100%;
				height: 300upx;
			}
			.fmUpload{
				width: 164upx;
				height: 52upx;
				background: #FFFFFF;
				border-radius: 20upx;
				position: absolute;
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				right: 20upx;
				top: 20upx;
				color: #1A75FF;
				image{
					width: 24upx;
					height: 24upx;
				}
			}
		}
		.qdForm{
			padding: 32upx 30upx;
			background: #fff;
			border-radius: 20upx;
			&.nopadding{
				padding-top: 0;
			}
		}
	}
	.flexBottom{
		width: 100%;
		height: 100upx;
		position: fixed;
		z-index: 99;
		bottom: 0;
		.leftBtn{
			width: 270upx;
			height: 100upx;
			background: #fff;
			font-size: 32upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1A75FF;
			image{
				width: 36upx;
				height: 36upx;
				margin-right: 6upx;
			}
		}
		.rightBtn{
			width: 480upx;
			height: 100upx;
			background: #1A75FF;
			font-size: 32upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
	.qdItem{
		background: #FFFFFF;
		border-radius:20upx;
		margin-top: 32upx;
		overflow: hidden;
		.itemTitle{
			height: 100upx;
			background: #FFFFFF;
			.bq{
				width: 160upx;
				height: 100upx;
				background: #1A75FF;
				border-radius: 20upx 0px 40upx 0px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
			.titInput{
				font-size: 32upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				width: 70%;
				text-align: center;
				padding: 0 30upx;
			}
		}
	}
</style>
